import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tiktokadult/tools_base/loading/l_error_widget.dart';
import 'package:tiktokadult/tools_base/loading/loading_center_widget.dart';
import 'package:tiktokadult/tools_base/refresh/pull_refresh.dart';

import '../../home_business/home_cell_style/video_simple_cell_widget.dart';
import 'more_free_video_controller.dart';

class MoreFreeVideoPage extends StatelessWidget {
  final String title;
  final String vId;
  const MoreFreeVideoPage(this.title, this.vId, {super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MoreFreeVideoController>(
      init: MoreFreeVideoController(vId),
      builder: (controller) => Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
            Container(
              padding: EdgeInsets.symmetric(vertical: 12),
              child: Container(
                width: 182,
                height: 31,
                padding: EdgeInsets.all(2),
                decoration: ShapeDecoration(
                  shape: StadiumBorder(),
                  color: Color(0xFF20252F),
                ),
                child: TabBar(
                  tabAlignment: TabAlignment.fill,
                  tabs: controller.sortTitles.map((e) {
                    return Container(
                      alignment: Alignment.center,
                      child: Text(e),
                    );
                  }).toList(),
                  labelStyle: TextStyle(
                    color: Color(0xFFF1F3F4),
                    fontSize: 12,
                  ),
                  unselectedLabelStyle: TextStyle(
                    color: Color(0xFFACBABF),
                    fontSize: 12,
                  ),
                  controller: controller.tabController,
                  padding: EdgeInsets.zero,
                  isScrollable: false,
                  onTap: (index) {
                    controller.sort = index;
                    controller.fetchPageData(showLoading: true);
                  },
                  labelPadding: EdgeInsets.zero,
                  indicator: ShapeDecoration(
                    shape: StadiumBorder(),
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [Color(0xFF83A4F8), Color(0xFF2A5CDE)],
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: pullYsRefresh(
                onInit: (ctr) => controller.refreshController = ctr,
                onRefresh: (_) => controller.fetchPageData(),
                onLoading: (_) => controller.fetchPageData(isRefresh: false),
                child: () {
                  if (controller.isLoading) return LoadingCenterWidget();
                  if (controller.dataSource.isEmpty) return CErrorWidget();
                  return GridView.builder(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 7,
                      mainAxisSpacing: 12,
                      childAspectRatio: 191 / 174,
                    ),
                    itemCount: controller.dataSource.length,
                    itemBuilder: (BuildContext context, int index) {
                      return SizedBox(
                        width: double.infinity,
                        height: double.infinity,
                        child: VideoSimpleCellWidget(
                          videoModel: controller.dataSource[index],
                        ),
                      );
                    },
                  );
                }(),
              ),
            )
          ],
        ),
      ),
    );
  }
}
